<template>
  <at-card>
    <view @click="toPath('/work/workDetail/workDetail')">
      <view class="flex">
        <view class="fw-600">{{ data.position }}</view>
        <view class="flex ml-20">
          <at-work-tag v-for="item of data.type" :key="item" :id="item"/>
        </view>
        <view v-if="detail" style="margin-left: auto" class="f-c-9 f-s-m">{{ data.createTime }}</view>
      </view>
      <view class="money fw-600 mt-10">
        {{ data.money }}
      </view>
      <view class="f-s-m f-c-2 mt-20"> {{ workCardTag}}</view>
      <up-divider></up-divider>
      <view class="flex" style="flex-wrap: wrap">
        <view class="work-tag" v-for="item of workCardLabel" :key="item">{{ item }}</view>
      </view>
    </view>
  </at-card>
</template>

<script setup>
import {computed} from "vue";
import {fmtDistance, toPath} from "@/utils/commonUtils";

const props = defineProps(['data', 'type', 'detail'])

const workCardLabel = computed(() => {
  return props.data.label.split(',')
})

const workCardTag = computed(() => {
  return props.data.tag.split(',').join(' | ')
})
</script>

<style lang="scss" scoped>
.work-tag {
  background: #f5f5f5;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
  color: #9d9d9d;
  margin: 10rpx;
  font-size: 24rpx;
  flex-shrink: 0;
}
</style>